<template>
  <div class="jaguar-view dev-menu">
    <div class="jaguar-search" />
    <div class="jaguar-control">
      <add-button @click="handleCreate" />
    </div>

    <el-card>
      <el-table
        ref="table"
        :data="tableData"
        v-loading="loading"
        row-key="id"
        default-expand-all
        table-layout="auto"
      >
        <el-table-column label="名称">
          <template #default="scope">
            {{
              scope.row.serverName ? scope.row.serverName : scope.row.menuName
            }}
          </template>
        </el-table-column>

        <el-table-column prop="menuPermission" label="权限" />
        <el-table-column prop="menuType" label="菜单类型与图标">
          <template #default="scope">
            <dictionary-label :value="scope.row.menuType" dicKey="menuType" />
            &nbsp;

            <template v-if="scope.row.menuIcon">
              <el-icon v-if="scope.row.menuIcon.endsWith('.svg')" color="black">
                <icon-svg
                  :name="
                    scope.row.menuIcon.substr(0, scope.row.menuIcon.length - 4)
                  "
                />
              </el-icon>

              <el-button v-else text :icon="scope.row.menuIcon" />
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="menuPage" label="展示页面" />
        <el-table-column prop="menuOrder" label="排序" width="80" />
        <el-table-column label="操作">
          <template #default="scope">
            <span v-if="!scope.row.serverName">
              <view-button @click="handleView(scope.row)" />
              <edit-button @click="handleEdit(scope.row)" />
              <el-button
                text
                type="primary"
                icon="copy-document"
                @click="handleCopy(scope.row)"
                >复制
              </el-button>
              <delete-button
                @confirm="
                  ({ instance, done }) =>
                    handleDelete(scope.row, { instance, done })
                "
              />
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <Edit :dialog="dialog" @success="getData()" />
  </div>
</template>
<script>
import { fetchTree, del } from '@/api/upms/menu'
import Edit from './Edit'

export default {
  name: 'Menu',
  data() {
    return {
      loading: false,
      tableData: [],
      dialog: {
        entity: null,
        operation: null,
        visible: false,
      },
    }
  },
  components: {
    Edit,
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      fetchTree()
        .then((res) => {
          this.tableData = res.data.data
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleCreate() {
      this.dialog.entity = null
      this.dialog.operation = 1
      this.dialog.visible = true
    },
    handleCopy(row) {
      this.dialog.entity = Object.assign({}, row)
      this.dialog.entity.id = null

      this.dialog.operation = 1
      this.dialog.visible = true
    },
    handleEdit(row) {
      this.dialog.entity = row
      this.dialog.operation = 2
      this.dialog.visible = true
    },
    handleView(row) {
      this.dialog.entity = row
      this.dialog.operation = 3
      this.dialog.visible = true
    },
    handleDelete(row, { instance, done }) {
      del(row.id)
        .then(() => {
          done()
          this.$message.success('删除成功')
          this.getData()
        })
        .finally(() => {
          instance.confirmButtonLoading = false
        })
    },
  },
}
</script>
<style lang="scss">
.dev-menu {
  .el-table tr {
    height: 65px;
  }

  .el-tabs__content {
    height: 100%;
    overflow: auto;
  }
}
</style>
